<template>
  <div class="todolist">
    <a-card class="my-card">
      <h2>列表</h2>
      <a-divider></a-divider>
      <div class="wrp">
        <div class="hd">
          <div class="content">工单标题</div>
          <div class="state">状态</div>
          <div class="actions">操作</div>
        </div>
        <div class="bd">
          <div class="item" v-for="(item,index) in allList" :key="index">
            <div class="content">{{item.content}}</div>
            <a-select style="width:120px" v-model:value="item.state" @change="handleChange(item,item.state)">
              <a-select-option v-for="(item,index) in selectOptions" :key="index">{{item.name}}</a-select-option>
            </a-select>
            <div class="actions">
              <span @click="remove(item)">删除</span>
            </div>
          </div>
        </div>
      </div>
    </a-card>
    <a-card class="my-card">
      <h2>
        <span>我的待办</span>
        <a-input v-model:value="content" class="my-input" /><span class="todo" @click="addOne(content)">添加</span>
      </h2>
      <a-divider></a-divider>
      <div class="wrp">
        <div class="hd">
          <div class="content">工单标题</div>
          <div class="state">状态</div>
          <div class="actions">操作</div>
        </div>
        <div class="bd">
          <div class="item" v-for="(item,index) in todoList" :key="index">
            <div class="content">{{item.content}}</div>
            <div :class="['state',item.state==0?'todo':item.state==1?'doing':'done']">待做</div>
            <div class="actions">
              <span @click="remove(item)">删除</span>
            </div>
          </div>
        </div>
      </div>
    </a-card>
    <a-card class="my-card">
      <h2>我的在办</h2>
      <a-divider></a-divider>
      <div class="wrp">
        <div class="hd">
          <div class="content">工单标题</div>
          <div class="state">状态</div>
          <div class="actions">操作</div>
        </div>
        <div class="bd">
          <div class="item" v-for="(item,index) in doingList" :key="index">
            <div class="content">{{item.content}}</div>
            <div :class="['state',item.state==0?'todo':item.state==1?'doing':'done']">在做</div>
            <div class="actions">
              <span @click="remove(item)">删除</span>
            </div>
          </div>
        </div>
      </div>
    </a-card>
    <a-card class="my-card">
      <h2>我的已完成</h2>
      <a-divider></a-divider>
      <div class="wrp">
        <div class="hd">
          <div class="content">工单标题</div>
          <div class="state">状态</div>
          <div class="actions">操作</div>
        </div>
        <div class="bd">
          <div class="item" v-for="(item,index) in doneList" :key="index">
            <div class="content">{{item.content}}</div>
            <div :class="['state',item.state==0?'todo':item.state==1?'doing':'done']">完成</div>
            <div class="actions">
              <span @click="remove(item)">删除</span>
            </div>
          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from "vue";
import { log, todo } from "../../service/index";
import { result } from "../../utils/result";
import store from "../../store/index";
export default defineComponent({
  setup() {
    const content = ref("");
    const userId = ref("");
    onMounted(() => {
      userId.value = store.state.userInfo._id;
      console.log("store.state.userInfo._id", store.state.userInfo._id);
    });
    /**待办添加 */
    const addOne = async (content) => {
      console.log("调用adddOne", content.value);

      const res = await todo.add(userId.value, content, 0); //待办默认state为0
      if (res.data.code == 200) {
        console.log("添加待办成功");
        getList();
      }
    };

    const showState = ref();
    const handleChange = async ({ _id }, showState) => {
      console.log("change", _id, showState); //param为0 1 2
      const res = await todo.update(_id, showState);
      result(res).success(({ data }) => {
        console.log("change111", data);
        getList();
      });
    };

    /**获取列表 */
    const allList = ref([]);
    const getAllList = async () => {
      const res = await todo.list(userId.value, 3);
      result(res)
        .success(({ data }) => {
          allList.value = data.list;
          // data.total;
        })
        .fail(({ data }) => {});
    };
    const todoList = ref([]);
    const getTodoList = async () => {
      const res = await todo.list(userId.value, 0);
      console.log("todo", res);
      if (res.data.code == 200) {
        todoList.value = res.data.data.list;
      }
    };
    const doingList = ref([]);
    const getDoingList = async () => {
      const res = await todo.list(userId.value, 1);
      if (res.data.code == 200) {
        doingList.value = res.data.data.list;
      }
    };
    const doneList = ref([]);
    const getDoneList = async () => {
      const res = await todo.list(userId.value, 2);
      if (res.data.code == 200) {
        doneList.value = res.data.data.list;
      }
    };

    const remove = async ({ _id }) => {
      const res = await todo.remove(_id);
      result(res)
        .success(({ data }) => {
          console.log("删除", data);
          //删除完后调接口
          getList();
        })
        .fail(({ data }) => {});
    };
    const getList = () => {
      getAllList();
      getTodoList();
      getDoingList();
      getDoneList();
    };
    onMounted(() => {
      getList();
    });

    const selectOptions = ref([
      {
        value: 0,
        name: "待做",
      },
      {
        value: 1,
        name: "在做",
      },
      {
        value: 2,
        name: "已完成",
      },
    ]);
    return {
      selectOptions,
      showState,
      addOne,
      remove,
      content,
      handleChange,
      allList,
      todoList,
      doingList,
      doneList,
    };
  },
});
//列表 获取值
//待办 可添加 可切状态
//在办 完成 可切状态

//问题一旦添加后获取列表
</script>

<style lang="less" scoped>
.todolist {
  display: flex;
  flex-wrap: wrap;
  :deep(.ant-card) {
    margin-right: 20px;
    margin-bottom: 20px;
    width: 45%;
  }
  .my-card {
    h2 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .my-input {
        margin-left: 4px;
        margin-right: 4px;
        flex: 1;
      }
    }
    .wrp {
      height: 150px;
      overflow-y: auto;
    }
    .hd,
    .bd .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .day {
        width: 70px;
      }
      .content {
        flex: 1;
      }
      .state {
        width: 60px;
        text-align: center;
      }
      .actions {
        width: 90px;
        display: flex;
        justify-content: center;
      }
    }
    .hd {
      height: 40px;
      .actions {
        justify-content: center;
      }
    }
    .bd .item {
      height: 40px;
      .actions {
        padding: 4px;
      }
      .actions span {
        display: flex;
        align-items: center;
        height: 30px;
        padding: 4px;
        background-color: #f9f0ff;
        color: #9d2ed4;
        border-radius: 4px;
      }
    }
  }
}
//待做
.todo {
  padding: 4px;
  border-radius: 4px;
  color: red;
  background: pink;
}
//在做
.doing {
  padding: 4px;
  border-radius: 4px;
  color: #fa8c82;
  background: #fff8ea;
}
//完成
.done {
  padding: 4px;
  border-radius: 4px;
  color: #fff;
  background: #108ee9;
}
</style>